<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>项目列表</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/admin/css/pearForm.css}"/>
    <link rel="stylesheet" th:href="@{/admin/css/nav.css}"/>

    <style type="text/css">

        .project-item :hover {
            cursor: pointer;
        }

        body {
            /*margin: 10px;*/
            font-family: 'Roboto', sans-serif;
            font-size: 14px;
        }

        .layui-card-body {
            border: solid 2px #c2c2c2;
            border-top: none;
        }

        .layui-card-header {
            font-size: 16px;
            background-color: #009688;
            color: white;
            font-family: Roboto, serif;
        }

    </style>
</head>
<body>
<!--<div th:include="nav::nav"></div>-->
<div class="layui-row" style="width: 100%">
    <ul class="layui-nav layui-bg-green" id="navigation" lay-filter="" style="font-size: 17px">
        <li class="layui-nav-item">REST Doc</li>
        <li class="layui-nav-item" id="restweb-project-nav">
            <a href="/restdoc/project/view?type=REST_WEB" target="_self">RESTweb项目</a>
        </li>
        <li class="layui-nav-item" id="dubbo-project-nav">
            <a href="/restdoc/project/view?type=DUBBO" target="_self">Dubbo项目</a>
        </li>
       <!-- <li class="layui-nav-item" id="springcloud-projct-nav">
            <a href="/restdoc/project/view?type=SPRINGCLOUD" target="_self">SpringCloud项目</a>
        </li>-->
    </ul>
</div>

<input type="hidden" th:value="${projectType}" id="projectType">
<div class="layui-container" style="margin-top: 10px;">
    <div class="layui-row">
        <div class="layui-row layui-col-space20 layui-col-md-offset3">
            <div class="layui-col-md2">
                <a href="javascript:void(0);" id="createProjectBtn" class="layui-btn  layui-btn-primary  layui-btn-lg">创建项目</a>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space20" id="content">
    </div>
    <div class="layui-row layui-col-space12">
        <div class="layui-inline">
            <button class="layui-btn layui-btn-primary  layui-btn-lg" id="previousBtn">上一页</button>
        </div>

        <div class="layui-inline">
            <button class="layui-btn layui-btn-primary  layui-btn-lg" id="nextBtn">下一页</button>
        </div>
    </div>

</div>

<input type="hidden" id="page" value="0">
<input type="hidden" id="size" value="12">
<input type="hidden" id="totalElements" value="0">

<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/admin/js/jquery.js}"></script>
<script th:src="@{/admin/js/util.js}"></script>
<script type="text/javascript" th:inline="javascript">


    function renderPage() {
        requestAndRenderContent();
    }

    function init() {
        disablePrevious();
        $("#page").val(0);
        $("#size").val(12);
        requestAndRenderContent();
    }

    init();

    $("#previousBtn").click(function () {
        if (parseInt($('#page').val()) === 0) {
            disablePrevious();
            return;
        }
        var page = parseInt($("#page").val());
        $("#page").val(page - 1);
        requestAndRenderContent();
    });

    $("#nextBtn").click(function () {
        var page = (parseInt($('#page').val()));
        var size = (parseInt($('#size').val()));
        var totalElements = parseInt($('#totalElements').val());
        var hasNext = (((page + 1) * size) < totalElements);

        if (!hasNext) {
            disableNext();
            return;
        }

        var page = parseInt($("#page").val());
        $("#page").val(page + 1);

        requestAndRenderContent();
    });

    function requestAndRenderContent() {

        var page = (parseInt($('#page').val()));
        var size = (parseInt($('#size').val()));

        $.ajax({
            type: 'GET',
            dataType: 'JSON',
            url: '/restdoc/project/list?type=' + $('#projectType').val() + '& page = ' + page + ' & size = ' + size,
            async: false,
            success: function (data) {
                if (data.code === "200") {
                    renderProjectContent(data['data']['content']);
                    $('#totalElements').val(data['data']['totalElements']);
                } else {
                    alert(data.message)
                }
            }
        });

        afterRenderCallback()
    }

    function afterRenderCallback() {
        var page = (parseInt($('#page').val()));
        var size = (parseInt($('#size').val()));

        var totalElements = (parseInt($('#totalElements').val()));

        console.info(page)
        console.info(size)
        console.info(totalElements)

        var hasNext = (((page + 1) * size) < totalElements);
        var hasPrevious = (page > 0);

        if (hasNext && hasPrevious) {
            undisablePrevious();
            undisableNext();
        } else if (hasNext && !hasPrevious) {
            disablePrevious();
            undisableNext();
        } else if (hasPrevious && !hasNext) {
            disableNext();
            undisablePrevious();
        } else {
            disableNext();
            disablePrevious();
        }
    }

    function renderProjectContent(content) {
        var html = "";
        for (var key in content) {
            var name = content[key].name;
            var desc = content[key].desc;
            var projectId = content[key].id.toString();
            var type = content[key].type;

            if (desc != null && desc.length > 15) {
                desc = desc.slice(0, 15) + "..."
            }


            if (desc == null) desc = "";
            var snippet = " </div>   <div id='" + projectId + "' ondblclick='clickProject(this)' class=\"layui-col-md3 project-item \">\n" +
                "            <div class=\"layui-card project-block\">\n" +
                "                <div class=\"layui-card-header\">" + name + "</div>\n" +

                "                <div class=\"layui-card-body\">" + desc +
                "  <br><br>  <span class=\"layui-badge layui-bg-cyan\">" + type + "</span>\n     " +
                "   <label ><a onclick='editProject(\"" + projectId + "\")' title='编辑' href='javascript:void(0);'><i class=\"layui-icon layui-icon-edit\" style=\"font-size: 22px; color: #393D49;\"></i></a></label>     " +
                "   <label ><a onclick='deleteProject(\"" + projectId + "\")' title='删除' href='javascript:void(0);'><i class=\"layui-icon layui-icon-delete\" style=\"font-size: 22px; color: #393D49;\"></i></a></label>     " +
                "   <label ><a onclick='projectDetail(\"" + projectId + "\")' title='详情' href='javascript:void(0);'><i class=\"layui-icon layui-icon-list\" style=\"font-size: 22px; color: #393D49;\"></i></a></label>     " +
                "<label> <a title='查看项目文档' href='/restdoc/" + projectId + "/document/nav/view'><i class=\"layui-icon layui-icon-home\" style=\"font-size: 22px; color: #393D49;\"></i></a>  \n</label>        </div>\n" +
                "            </div>\n" +
                "        </div>";
            html = html + snippet;
        }

        $('#content').html(html)
    }


    var lay;
    layui.use(['element', 'layer'], function () {
        var element = layui.element;
        var layer = layui.layer;
        var $ = layui.jquery;
        lay = layui.layer;


        $('#createProjectBtn').click(function () {
            layer.open({
                type: 2,
                title: '创建项目',
                area: ['800px', '500px'],
                scrollbar: false,
                content: ['/restdoc/project/view/add', 'no'],
                btn: ['确认创建'],
                yes: function (index, document) {
                    var res = window["layui-layer-iframe" + index].getFormData();

                    if (res['name'] === '') {
                        layer.msg("请填写项目名称");
                        return;
                    }


                    $.ajax({
                        type: 'POST',
                        dataType: 'JSON',
                        contentType: 'application/json;charset=utf-8',
                        url: '/restdoc/project',
                        data: JSON.stringify(res),
                        async: false,
                        success: function (data) {
                            if (data.code === "200") {
                                layer.msg("创建成功");
                                layer.close(index);
                                renderPage()
                            } else {
                                layer.msg(data.message)
                            }
                        }
                    });
                }
            });
        })

    });

    function projectDetail(projectId) {
        lay.open({
            title: '项目详情',
            area: ['800px', '500px'],
            scrollbar: false,
            type: 2,
            content: '/restdoc/project/' + projectId + '/view'
        });
    }

    function clickProject(obj) {
        var id = obj.id;
        lay.open({
            title: 'Project Detail',
            area: ['800px', '500px'],
            scrollbar: false,
            type: 2,
            content: '/restdoc/project/' + id + '/view'
        });
    }

    function editProject(projectId) {
        layer.open({
            type: 2,
            title: '编辑项目',
            area: ['800px', '500px'],
            scrollbar: false,
            content: ['/restdoc/project/' + projectId + '/view/update', 'no'],
            btn: ['确认修改'],
            yes: function (index, document) {
                var res = window["layui-layer-iframe" + index].getFormData();

                if (res['name'] === '') {
                    lay.msg("请填写项目名称");
                    return;
                }


                $.ajax({
                    type: 'PATCH',
                    dataType: 'JSON',
                    contentType: 'application/json;charset=utf-8',
                    url: '/restdoc/project',
                    data: JSON.stringify(res),
                    async: false,
                    success: function (data) {
                        if (data.code === "200") {
                            layer.msg("修改成功");
                            renderPage()
                        } else {
                            layer.msg(data.message)
                        }
                    }
                });

                layer.close(index);
            }
        });
    }

    function deleteProject(projectId) {
        layer.confirm('确认删除项目？', function (index) {
            $.ajax({
                type: 'DELETE',
                url: '/restdoc/project/' + projectId,
                async: false,
                success: function (data) {
                    if (data.code === "200") {
                        lay.msg("删除成功");
                        init()
                    } else {
                        lay.msg("删除失败")
                    }
                }
            });
            layer.close(index);
        });
    }

    var type = $('#projectType').val();

    if (type === 'REST_WEB') {
        $("#restweb-project-nav").addClass("layui-this")
    } else if (type === 'DUBBO') {
        $("#dubbo-project-nav").addClass("layui-this")
    } else {
        $("#springcloud-projct-nav").addClass("layui-this")
    }


    function disableNext() {
        $("#nextBtn").addClass("layui-btn-disabled")
    }

    function undisableNext() {
        $("#nextBtn").removeClass("layui-btn-disabled")
    }

    function undisablePrevious() {
        $("#previousBtn").removeClass("layui-btn-disabled")
    }

    function disablePrevious() {
        $("#previousBtn").addClass("layui-btn-disabled")
    }

</script>
</body>
</html>